<template>
    <div>
      <pform ref="form" :model="form" lw="140">
          <el-form-item label="可用分区">
            <el-radio-group v-model="form.field1">
              <el-radio-button label="可用区1"></el-radio-button>
              <el-radio-button label="可用区2"></el-radio-button>
              <el-radio-button label="可用区4"></el-radio-button>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="名称">
            <el-input style="width:233px;"  v-model="form.field2" placeholder="请输入"></el-input>
          </el-form-item>
          <el-form-item label="子网IPv4网段">
            <div>
              <el-input style="width:74px;"  v-model="form.field3" placeholder="请输入"></el-input>
              <span  class="dot"></span>
              <el-input style="width:74px;"  v-model="form.field4" placeholder="请输入"></el-input>
              <span  class="dot"></span>
              <el-input style="width:74px;"  v-model="form.field5" placeholder="请输入"></el-input>
              <span  class="dot"></span>
              <el-input style="width:74px;"  v-model="form.field6" placeholder="请输入"></el-input>
              <span  class="a-1">/</span>
              <el-select style="width:74px;" v-model="form.field7" placeholder="请选择">
                <el-option v-for="item in nums" :key="item" :label="item" :value="item"></el-option>
              </el-select>
            </div>
          </el-form-item>
          <el-form-item label="子网IPv6">
            <el-radio v-model="form.radio" label="1">开启</el-radio>
            <el-radio v-model="form.radio" label="2">关闭</el-radio>
          </el-form-item>
          <el-form-item label="关联路由">
            <el-checkbox-group v-model="form.checkList">
              <el-checkbox label="关联"></el-checkbox>
              <el-checkbox label="不关联"></el-checkbox>
            </el-checkbox-group>
          </el-form-item>
          <el-divider></el-divider>
          <el-form-item label="网关">
            <div>
              <el-input style="width:74px;"  v-model="form.field3" placeholder="请输入"></el-input>
              <span  class="dot"></span>
              <el-input style="width:74px;"  v-model="form.field4" placeholder="请输入"></el-input>
              <span  class="dot"></span>
              <el-input style="width:74px;"  v-model="form.field5" placeholder="请输入"></el-input>
              <span  class="dot"></span>
              <el-input style="width:74px;"  v-model="form.field6" placeholder="请输入"></el-input>
            </div>
          </el-form-item>
          <el-form-item label="DNS服务器地址">
            <el-input style="width:233px;"  v-model="form.field2" placeholder="请输入"></el-input>
          </el-form-item>
          <el-form-item label="域名">
            <el-input style="width:233px;"  v-model="form.field2" placeholder="请输入"></el-input>
          </el-form-item>
          <el-form-item label="NTP 服务器地址">
            <el-input style="width:233px;"  v-model="form.field2" placeholder="请输入"></el-input>
          </el-form-item>
        </pform>
    </div>
  </template>
  <script>
  export default {
    mounted() {
      for (let i = 1; i <= 28; i++) {
        this.nums.push(i);
      }
    },
    data(){
      return {
        fq:'',
        stepData:[{num:1,nameIn:'1',nameOut:'基础配置'}
          // ,{num:2,nameIn:'2',nameOut:'确认信息'},
        ],
        stepData1:[{num:1,nameIn:'2',nameOut:'默认子网'}
          // ,{num:2,nameIn:'2',nameOut:'确认信息'},
        ],
        doneNum:1,
        doneNum1:2,
        form:{
          field1:'可用区1',
          radio:'1',
          checkList:['关联']
        },
        nums:[],
        items:[]
      }
    },
    methods:{ 
      addLable(){
        this.items.push({})
      },
      subtractLable(item){
        this.items.splice(0,1)
      },
      handleFqType(fq){
        this.fq = fq;
      },
      handleAdd(){
        this.$router.push({path:'/networksuc/vmVPC'})
      },
    }
  }
  </script>
  <style scoped lang="less">
  .dot {
    display: inline-block; /* 必需，否则无法显示文本 */
    width: 8px; /* 控制圆点的大小 */
    height: 8px;
    line-height: 8px;
    border-radius: 50%; /* 将正方形转换成圆形 */
    background-color: rgb(165, 172, 179); /* 修改圆点的颜色 */
    margin-left: 5px;
    margin-right: 5px; /* 添加间距 */
  }
  .a-1{
    font-size: 34px;
    display: inline-block;
    vertical-align: top;
    color: #a5acb3;
    padding: 0 5px;
  }
  
  /deep/ .el-button--text {
    font-size: 18px;
  }
  </style>
  